<template>
  <div class="distributorSide-settlementManagement-settlement-confirm">
    <div class="tab">
      <tabs
        :tabs-arr="TAB_ARR"
        :active-index="queryConsumptionStatus"
        @returnIndex="onHandletabs"
      />
    </div>
    <!-- 搜索 -->
    <div class="header">
      <m-search
        ref="SearchForm"
        label-width="66px"
        :data="SEARCH_DATA"
        @searchForm="onSearch"
        @resetForm="onReset"
      />
    </div>
    <div class="header-botton">
      <el-button type="primary" @click="exportExcelButton"
        ><m-iconfont
          classify="m-pc-public"
          icon="m-pc-public_daocsj"
          size="14"
        /><span>导出数据</span></el-button
      >
    </div>
    <!-- 列表 -->
    <m-editable
      v-loading="table.tableLoading"
      :empty-type="table.resultType"
      :data="table.dataList"
      :columns="COLUMNS_TABLE"
      height="400"
    >
      <template slot="default-action" slot-scope="scope">
        <el-button
          :disabled="scope.row.statusBool !== 0"
          type="primary"
          plain
          size="mini"
          @click.stop="onCommits(scope.row)"
          >提交</el-button
        >
        <el-button
          :disabled="scope.row.statusBool !== 2"
          type="primary"
          plain
          size="mini"
          @click="onCancels(scope.row)"
          >取消</el-button
        >
        <el-button
          type="primary"
          plain
          size="mini"
          @click.stop="onDetails(scope.row)"
          >查看</el-button
        >
      </template>
    </m-editable>
    <!-- 分页模块 -->
    <div v-if="table.dataList.length > 0" class="footer">
      <el-pagination
        class="pageBox"
        align="right"
        :page-size="page.size"
        :current-page="page.curPage"
        :total="page.total"
        :layout="page.PAGINATION_LAYOUT"
        :page-sizes="page.PAGE_NUMBER"
        @size-change="onPageSizeChange"
        @current-change="onPageCurrentChange"
      />
    </div>
    <m-dialog
      class="popup__m-dialog"
      title="提示"
      :visible.sync="commitForm.commitTipsShow"
      :before-close="onHandleClose"
      confirm-text="是"
      refuse-text="否"
      @refuse="onCommit(0)"
      @confirm="onCommit(1)"
      @closeBtn="onHandleClose"
    >
      <template #content
        ><m-iconfont
          classify="taiermao"
          icon="iconpc-alert_tishi1x"
          size="16"
          color="#ffba00"
        />
        结算确认后是否自动发起开票申请？
      </template>
    </m-dialog>
  </div>
</template>
<script>
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common';
import tabs from '@pc/m-components/m-tabs/index.vue';
import { formatDate } from '@const/filter';
import {
  notarizePageList,
  notarizeStatusCount,
  notarizesubStatusList,
  notarizesubExport,
  submitConsumeOrder,
  cancelConsumeOrder,
} from '@api/hossyn-order-center';
import { $loadFileSimply } from '@const/loadFileOps'; // 下载文件的方法
import { fileDownload } from '@const/utils';
import * as CONSTS from './const';

export default {
  components: {
    tabs,
  },
  data() {
    return {
      ...CONSTS,
      table: {
        searchData: {},
        tableLoading: false,
        resultType: 0,
        dataList: [],
        selectionChangeList: [],
      },
      page: {
        PAGE_NUMBER, // 页码数组
        PAGINATION_LAYOUT, // 页码功能布局
        curPage: 1,
        pageSize: PAGE_NUMBER[0],
        total: 0,
      },
      exportLoading: false,
      queryConsumptionStatus: 0,

      commitForm: {
        commitTipsShow: false,
        data: {},
      },
    };
  },
  mounted() {
    this.getDataList();
    this.getStatusCount();
    this.getStatusList();
  },
  methods: {
    onHandleClose() {
      this.commitForm.commitTipsShow = false;
    },
    onCommit(flag) {
      this.$axios({
        url: submitConsumeOrder,
        method: 'post',
        data: {
          settleMainOrderId: this.commitForm.data.settleOrderMainId,
          autoBillingFlag: flag,
        },
      })
        .then(() => {
          this.getDataList();
          this.getStatusCount();
          this.$message({
            type: 'success',
            message: '提交成功',
          });
        })
        .finally(() => {
          this.onHandleClose();
        });
    },
    // 获取数据
    getDataList() {
      this.table.tableLoading = true;
      this.$axios({
        url: notarizePageList,
        method: 'post',
        data: {
          page: this.page.curPage,
          pageSize: this.page.pageSize,
          queryConsumptionStatus: this.queryConsumptionStatus,
          ...this.table.searchData,
        },
      })
        .then((res) => {
          this.table.dataList = res.data.payload.content || [];
          this.page.total = res.data.payload.totalElements;
          this.table.dataList.forEach((item) => {
            const listItem = item;
            if (item.consumptionStatusDesc === '待提交') {
              listItem.statusBool = 0;
            } else if (
              item.consumptionStatusDesc === '已登记' ||
              item.consumptionStatusDesc === '已取消'
            ) {
              listItem.statusBool = 1;
            } else {
              listItem.statusBool = 2;
            }
          });
        })
        .finally(() => {
          this.table.tableLoading = false;
        });
    },
    // 小红点数字
    getStatusCount() {
      this.table.tableLoading = true;
      this.$axios({
        url: notarizeStatusCount,
        method: 'post',
        data: {},
      })
        .then((res) => {
          const CountList = res.data.payload;
          this.TAB_ARR = [
            { lab: '全部', val: 0, badge: '' },
            { lab: '待提交', val: 1, badge: '' },
            { lab: '处理中', val: 2, badge: '' },
            { lab: '已确认', val: 5, badge: '' },
            { lab: '已取消', val: 6, badge: '' },
          ];
          CountList.forEach((item) => {
            this.TAB_ARR.forEach((v) => {
              const StatusList = v;
              if (v.val === item.status) {
                StatusList.badge = item.num;
              }
            });
          });
        })
        .finally(() => {
          this.table.tableLoading = false;
        });
    },
    // 状态
    getStatusList() {
      this.table.tableLoading = true;
      this.$axios({
        url: notarizesubStatusList,
        method: 'post',
        data: {},
      })
        .then((res) => {
          const notarizeStatus = res.data.payload;
          this.SEARCH_DATA[1].options = notarizeStatus.map((item) => ({
            label: item.value,
            value: item.key,
          }));
        })
        .finally(() => {
          this.table.tableLoading = false;
        });
    },
    // 导出
    exportExcelButton() {
      this.exportLoading = true;
      const timeStr = formatDate(new Date(), 'YYYYMMDD-HH:mm:ss');
      const filename = `查询导出${timeStr}.xls`;
      const data = {
        page: this.page.curPage,
        pageSize: this.page.pageSize,
        queryConsumptionStatus: this.queryConsumptionStatus,
        ...this.table.searchData,
      };
      const reqData = {
        url: notarizesubExport,
        data,
        method: 'post',
        timeout: 300000,
      };
      $loadFileSimply(reqData)
        .then((res) => {
          // 文件流
          fileDownload(res, filename);
        })
        .finally(() => {
          this.exportLoading = false;
        });
    },
    // 提交
    onCommits(scope) {
      this.commitForm.commitTipsShow = true;
      this.commitForm.data = scope;
    },
    // 取消
    onCancels(scope) {
      this.$mdialog({
        type: 'warning',
        message: '是否继续取消操作?',
        'confirm-text': '确定',
        'refuse-text': '取消',
      })
        .then(() => {
          this.table.tableLoading = true;
          this.$axios({
            url: cancelConsumeOrder,
            method: 'post',
            data: { settleMainOrderId: scope.settleOrderMainId },
          })
            .then(() => {
              this.getDataList();
              this.getStatusCount();
              this.$message({
                type: 'success',
                message: '取消成功',
              });
            })
            .finally(() => {
              this.table.tableLoading = false;
            });
        })
        .catch(() => {});
    },
    // 详情
    onDetails(scope) {
      this.$router.push({
        path: '/distributorSide/settlementManagement/settlement-details',
        query: {
          settleOrderId: scope.settleOrderMainId,
          consume: 1,
        },
      });
    },
    // 搜索
    onSearch(condition) {
      this.page.curPage = 1;
      this.table.searchData = condition;
      this.getDataList();
      this.getStatusCount();
    },
    // 重置
    onReset(condition) {
      this.page.curPage = 1;
      this.table.searchData = condition;
      this.getDataList();
      this.getStatusCount();
    },
    // tab切换事件
    onHandletabs(val) {
      this.page.curPage = 1;
      this.queryConsumptionStatus = val;
      this.getDataList();
      this.getStatusCount();
    },
    // 点击分页事件
    onPageSizeChange(size) {
      this.page.pageSize = size;
      this.getDataList();
      this.getStatusCount();
    },
    // 填写分页跳转时间
    onPageCurrentChange(curPage) {
      this.page.curPage = curPage;
      this.getDataList();
      this.getStatusCount();
    },
  },
};
</script>
<style lang="less">
.distributorSide-settlementManagement-settlement-confirm {
  margin: 0 20px 10px 20px !important;
  display: flex;
  flex-direction: column;
  .header-botton {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 0 10px 0px;
  }
  .tab {
    margin: 20px 0 0 0;
  }
  .footer {
    padding: 7px 26px 6px 0;
    border: 1px solid @cutOffRuleColor;
    border-top: none;
    border-radius: 0 0 3px 3px;
  }
  .popup__m-dialog {
    .el-select {
      width: 100%;
    }
  }
}
</style>
